<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- css -->
<link rel="stylesheet" href='<?=base_url().'resource/lib/bootstrap/css/bootstrap.min.css'?>'>

<!-- js -->
<script src='<?=base_url().'resource/lib/bootstrap/jquery-2.1.1.min.js'?>'></script>
<script src='<?=base_url().'resource/lib/bootstrap/js/bootstrap.min.js'?>'></script>


<script>

$(function () {
	select1();
	$('#S1').bind("change", select2);
	$('#S2').bind("change", select3);
	});

function select1(){
	$.ajax(
	{
	    type: "post",
	    url:'<?=base_url().'index.php/Json_Control/get_address'?>',
	    //url: "/ci/index.php/Json_Control/get_address",  //base_url
	    data: {"type":1},
	    success: function (msg) {
	    	msg = $.parseJSON(msg);
	    	$("#S1").append("<option value="  + "0>" + "</option>");
	        for (var i = 0; i < msg.length; i++) {
	            $("#S1").append("<option value='" +msg[i].provinceId+ "'>" + msg[i].province + "</option>");
	        }
	        select2();
	 
	    }
	})
};


function select2() {
	$("#S2").html("");
	$.ajax(
	{
	    type: "post",
// 	    url: "/ci/index.php/Json_Control/get_address",
	    url:'<?=base_url().'index.php/Json_Control/get_address'?>',
	    data: {"add_code":$('#S1').val(),"type":2},
	    success: function (msg) {
		    //alert($('#S1').val());
	    	msg = $.parseJSON(msg);
	    	$("#S2").append("<option value="  + "0>" + "</option>");
	        for (var i = 0; i < msg.length; i++) {
	            $("#S2").append("<option value=" + msg[i].cityId + ">" + msg[i].city + "</option>");
	        }
	        select3();
	    }
	})
};

function select3() {
	$("#S3").html("");
	$.ajax(
	{
	    type: "post",
// 	    url: "/ci/index.php/Json_Control/get_address",
		url:'<?=base_url().'index.php/Json_Control/get_address'?>',
	    data: { "add_code":$('#S2').val(),"type":3},
	    success: function (msg) {
	    	msg = $.parseJSON(msg);
	    	$("#S3").append("<option value="  + "0>" + "</option>");
	        for (var i = 0; i < msg.length; i++) {
	            $("#S3").append("<option value=" + msg[i].areaId + ">" + msg[i].area+ "</option>");
	        }
	    }
	});
};

</script>


<title><?php echo $title;?></title>

<script>

</script>  
</head>
<body>
<div class="container" >
<div class="row">

<div class="input-group">
<div class="input-group-addon">省 <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></div>
<select class="form-control" id="S1" name="provinceId" >
</select>
<div class="input-group-addon">
<span id="provinceImg" class="" aria-hidden="true"></span>     
</div><!-- input-group-addon -->
</div><!-- input-group -->

<div class="input-group">
<div class="input-group-addon">市 <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></div>
<select class="form-control" id="S2" name="cityId">
</select>
<div class="input-group-addon">
<span id="cityImg" class="" aria-hidden="true"></span>      
</div><!-- input-group-addon -->
</div><!-- input-group -->

<div class="input-group">
<div class="input-group-addon">区 <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></div>
<select class="form-control" id="S3" name="areaId">
</select>
<div class="input-group-addon">
<span id="areaImg" class="" aria-hidden="true"></span>      
</div><!-- input-group-addon -->
</div><!-- input-group -->





</div>
</div>
</body>
</html>